
AFRAME.registerComponent("mazify", {

    init: function () {
        let mazeData = {
            data: [
                [1, 1, 2, 1, 4, 4, 4, 1, 1, 1, 4, 1, 4, 1, 4, 1, 4, 1, 4, 3],
                [1, 1, 4, 4, 4, 4, 4, 1, 1, 1, 4, 1, 4, 1, 4, 1, 4, 1, 4, 4],
                [1, 1, 4, 4, 4, 4, 4, 1, 1, 1, 4, 1, 4, 1, 3, 1, 4, 1, 1, 4],
                [1, 3, 4, 1, 4, 4, 4, 1, 1, 1, 4, 1, 4, 1, 4, 1, 4, 4, 1, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 4],
                [4, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 4],
                [4, 1, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 4],
                [4, 4, 4, 1, 4, 4, 1, 1, 1, 1, 4, 4, 4, 1, 4, 4, 4, 4, 1, 4],
                [4, 4, 4, 1, 4, 4, 1, 3, 4, 1, 1, 4, 4, 1, 1, 1, 4, 4, 4, 4],
                [4, 4, 4, 1, 4, 4, 1, 4, 4, 4, 1, 4, 4, 1, 4, 4, 4, 1, 4, 4],
                [1, 1, 4, 1, 4, 4, 1, 4, 4, 4, 1, 4, 4, 1, 4, 4, 4, 1, 1, 4],
                [4, 1, 4, 1, 1, 1, 1, 4, 4, 4, 1, 4, 4, 1, 4, 4, 4, 4, 1, 4],
                [4, 1, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 1, 1, 4, 4, 4, 4, 1, 4],
                [4, 1, 1, 4, 4, 1, 1, 1, 4, 4, 4, 1, 4, 4, 4, 4, 4, 4, 1, 4],
                [4, 4, 1, 1, 4, 4, 4, 1, 4, 4, 4, 1, 4, 4, 4, 4, 4, 1, 1, 4],
                [4, 4, 4, 1, 3, 4, 4, 1, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 3, 4],
                [4, 4, 4, 4, 1, 1, 1, 4, 4, 4, 4, 1, 4, 4, 4, 4, 4, 1, 1, 4],
                [4, 4, 4, 4, 4, 4, 1, 1, 1, 1, 1, 1, 4, 4, 1, 1, 1, 1, 1, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 1, 4, 1, 4, 4, 4, 4, 4],
                [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4]
            ],
            height: mazeHeight,
            width: mazeWidth,
            endNumber: 6,
            startNumber: 1
        }
        // 如果maze-editor未保存过(maze-editor编辑的迷宫数据未进入本地存储)，则设置组件中的值为本地存储中的值
        if (localStorage.getItem("my-maze-data") != undefined) {
            mazeData = JSON.parse(localStorage.getItem("my-maze-data"));
        } else {
            localStorage.setItem("my-maze-data", JSON.stringify(mazeData));
        }
        const el = this.el;
        const maze_size = 3;
        const maze_height = 12;

        for (let y = 0; y < mazeData.width; y++) {
            for (let x = 0; x < mazeData.height; x++) {
                const objType = mazeData.data[x][y];
                // console.log('objType', objType);
                const position = {
                    x: ((x - (mazeData.width / 2)) * maze_size),
                    y: 1.5,
                    z: (y - (mazeData.height / 2)) * maze_size
                };
                // 可以用mapTable上的数据，把它放在全局
                if (objType === mapTable[1].type) {// 1-wall，2-起点，3-终点，4-空地
                    let wall = document.createElement('a-box');
                    wall.setAttribute('width', maze_size);
                    wall.setAttribute('height', maze_height);
                    wall.setAttribute('depth', maze_size);
                    wall.setAttribute('position', position);
                    wall.setAttribute('color', '#fff');
                    wall.setAttribute('material', 'src: #brick-02; repeat: 2 4');
                    wall.setAttribute('static-body', '');
                    el.appendChild(wall);
                }
                else if (objType === mapTable[2].type) {// 1-wall，2-起点，3-终点，4-空地
                    let tile = document.createElement('a-box');
                    tile.setAttribute('width', maze_size);
                    tile.setAttribute('height', 0.1);
                    tile.setAttribute('depth', maze_size);
                    tile.setAttribute('position', { x: position.x, y: 0, z: position.z });
                    tile.setAttribute('material', 'src: #start');
                    tile.setAttribute('static-body', '');
                    tile.setAttribute('id', 'start-tile');
                    el.appendChild(tile);

                    let player = document.querySelector("#player");
                    let playerPos = player.getAttribute("position");
                    player.setAttribute('position', { x: position.x, y: playerPos.y, z: position.z })
                } else if (objType === mapTable[3].type) {// 1-wall，2-起点，3-终点，4-空地

                    let eggFound = document.createElement('a-entity');
                    eggFound.setAttribute('class', `found-egg`);
                    eggFound.setAttribute('gltf-model', `../../assets/models/objects/egg/egg.glb`);
                    eggFound.setAttribute('visible', false);
                    eggFound.setAttribute('static-body', '');
                    eggFound.setAttribute('position', { x: position.x, y: 1, z: position.z });
                    el.appendChild(eggFound);

                    let egg = document.createElement('a-entity');
                    const randomId = Math.floor(getRandomArbitrary(1, 5));
                    // egg.setAttribute('class',`egg-${randomId}`);
                    egg.setAttribute('class', `egg`);
                    egg.setAttribute('gltf-model', `../../assets/models/objects/easter_eggs/egg-${randomId}.glb`);
                    egg.setAttribute('position', { x: position.x, y: 1, z: position.z });
                    egg.setAttribute('static-body', '');
                    function toggleEgg(evt) {
                        const eggId = egg.getAttribute('class');
                        const eggFoundId = eggFound.getAttribute('class');
                        // console.error('eggId', eggId);
                        // console.error('eggFoundId', eggFoundId);
                        egg.setAttribute('visible', false);
                        eggFound.setAttribute('visible', true);
                        foundEggNumber++;
                        if(foundEggNumber===endNumber || true){//如果找到所有彩蛋
                            const el=document.querySelector('.portal');
                            let start = document.querySelector("#start-tile");
                            let startPos = start.getAttribute("position");
                            const pos={
                                x: startPos.x, y: 0, z: startPos.z
                            };
                            showPortal(el,pos);
                        }
                        showEggFoundMessage(showEggFoundMessageTimeSelf);
                        egg.removeEventListener('click', toggleEgg);
                        egg.parentNode.removeChild(egg);
                    }
                    egg.addEventListener('click', toggleEgg);
                    el.appendChild(egg);

                    let tile = document.createElement('a-box');
                    tile.setAttribute('width', maze_size);
                    tile.setAttribute('height', 0.1);
                    tile.setAttribute('depth', maze_size);
                    tile.setAttribute('position', { x: position.x, y: 0.1, z: position.z });
                    tile.setAttribute('material', 'src: #finish');
                    tile.setAttribute('id', 'finish-tile');
                    tile.setAttribute('static-body', '');
                    el.appendChild(tile);

                    // let found_egg = document.createElement('a-entity');
                    // found_egg.setAttribute('networked', 'template:' + foundEggTemplate);
                    // found_egg.setAttribute('visible', false);
                    // found_egg.setAttribute('position', { x: position.x, y: 1, z: position.z });
                    // el.appendChild(found_egg);

                    // let egg = document.createElement('a-entity');
                    // egg.setAttribute('networked', 'template:' + eggTemplate);
                    // egg.setAttribute('position', { x: position.x, y: 1, z: position.z });
                    // egg.addEventListener('click', function (evt) {
                    //     console.error('click');
                    //     console.log('evt.detail', evt.detail);
                    //     console.log(evt.detail.intersection.point);
                    //     // egg.setAttribute('visible', false);
                    //     // eggFound.setAttribute('visible', true);
                    // });
                    // el.appendChild(egg);

                }
            }
        }
    }
})

